<template>
	<div>
		<div class="oneBox">
			<van-icon name="cross" size="30px" style="margin:50px 0 0 30px;" />
			<span class="oneBox-span">帮助</span>
		</div>
		<div class="twoBox">
			<h2>欢迎登录饱了么</h2>
			<van-form @submit="onSubmit" :model="loginData">
				<van-cell-group inset>
					<van-field v-model="loginData.username" name="用户名" label="邮箱" placeholder="请输入邮箱"
						:rules="[{ required: true, message: '请填写用户名' }]" />
					<span v-if="show2">未注册的邮箱验证后自动创建饱了么账户</span>
					<van-field v-if="show1" v-model="loginData.password" type="password" name="密码" placeholder="请输入密码"
						:rules="[{ required: true, message: '请填写密码' }]" />
				</van-cell-group>
				<div style="margin-top: 50px">
					<div class="xieyi">
						<div v-if="gou">
							<div class="one">
								请先阅读并同意协议
							</div>
							<div class="t"></div>
						</div>
						<van-checkbox v-model="checked" shape="square" icon-size="12px" @click="qu"></van-checkbox>
						<div :class="{'dou':dou,'xieyi-zi':true,'animated':true}">
							<span>
								我已同意并阅读
								<a>《饱了么用户协议》</a>、
								<a>《隐私政策》</a>
								，并接受饱了么使用该账号信息（如昵称、头像、收货地址）进行统一管理
							</span>
						</div>
					</div>

					<van-button @click="sendEmail()" round block color="#ffd101" native-type="submit" 
						style="margin-top: 20px">

						<span style="color: black;font-weight: bold;" >{{ but }}</span>

					</van-button>
					<div class="dlZhuanghang">
						<div @click="huang()">{{ transition }}</div>
						<div>遇到问题</div>
					</div>
				</div>
			</van-form>
			<div>

			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				loginData: {
					username: '', //邮箱
					checkCode: '', //邮箱验证码
					inputCheckCode: '', //输入的验证码
				},
				password: '',
				transition: "密码登录",
				show1: false,
				show2: true,
				but: "获取邮箱验证码",
				checked: false,
				dou: false,
				gou: false,
			}
		},
		methods: {
			sendEmail() {
				/**
				 * 点击后给输入的邮箱发送一封带有验证码的的邮件。
					要求：1一个自然日只能给一个邮箱地址发送10封邮件
					2.验证码有效期为15分钟
					3.点击发送后进行60秒倒计时， 此时按钮不可用。倒计时完后显示重新发送
				 */
				if (!this.loginData.username) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "请输入邮箱"
					})
					return;
				}
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			
				if (this.loginData.username != '' && !regEmail.test(this.loginData.username)) {
					this.$message({
						message: '邮箱格式不正确',
						type: 'error'
					})
					// this.loginData.username = ''
				}
				// let data = qs.stringify(this.loginData)
				console.log("this.loginData.username=" + this.loginData.username);
				this.loginData.inputCheckCode = null;
				this.$axios.get('/user/mail/send', {
						params: {
							email: this.loginData.username,
						}
					})
					.then(data => {
						this.loginData.checkCode = data.checkCode;
						console.log("checkCode=" + this.loginData.checkCode);
						
					}).catch(error => {
						console.log(error);
					})
				this.$router.push({
					path: '/verify',
					query: {
						'username': this.loginData.username
					}
				})
			},
			huang() {
				if (this.transition == "验证码登录") {
					this.transition = "密码登录"
					this.show1 = false
					this.but = "获取邮箱验证码"
					this.show2 = true
				} else if (this.transition == "密码登录") {
					this.transition = "验证码登录"
					this.show1 = true
					this.but = "登录"
					this.show2 = false
				}
			},
			shake() {
				if (this.checked == false) {
					this.dou = true
					this.gou = true

					setTimeout(() => {
						this.dou = false;
					}, 1000)
				}
				this.$router.push({
					path: '/verify',
					query: {
						'username': this.loginData.username
					}

				})
				/**
				 * 点击后给输入的邮箱发送一封带有验证码的的邮件。
					要求：1一个自然日只能给一个邮箱地址发送10封邮件
					2.验证码有效期为15分钟
					3.点击发送后进行60秒倒计时， 此时按钮不可用。倒计时完后显示重新发送
				 */
				if (!this.registerData.email) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "请输入邮箱"
					})
					return;
				}
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				
				if (this.registerData.email != '' && !regEmail.test(this.registerData.email)) {
					this.$message({
						message: '邮箱格式不正确',
						type: 'error'
					})
					// this.registerData.email = ''
				}
				// let data = qs.stringify(this.registerData)
				console.log("this.registerData.email=" + this.registerData.email);
				this.registerData.inputCheckCode = null;
				this.btnLoading = true;
				this.interCount = this.count;
				this.$axios.get('/user/mail/send', {
						params: {
							email: this.loginData.username,
						}
					})
					.then(data => {
						this.registerData.checkCode = data.checkCode;
						console.log("checkCode=" + this.loginData.checkCode);
						
					}).catch(error => {
						console.log(error);
					})
				// this.$router.push("/register");
				
			},
			qu() {
				if (this.checked == true) {
					this.gou = false

				}
			},
			
		}
	}
</script>
<style>
	h2 {
		margin: 20px 0px 20px 0px;
	}

	.oneBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.oneBox-span {
		size: 100px;
		font-weight: bold;
		margin: 50px 30px 0 0;
	}

	.twoBox {
		margin: 0 60px 0 60px;
	}

	.twoBox span {
		font-size: 10px;
		color: #999999;
	}

	.one {
		margin-right: 180px;
		margin-left: -15px;
		width: 120px;
		height: 20px;
		background-color: #000000;
		border-radius: 8px;
		font-size: 8px;
		color: white;
		text-align: center;
	}

	.t {
		margin-left: 2px;
		margin-top: -4px;
		width: 8px;
		height: 8px;
		background-color: #000000;
		transform: rotate(45deg);
		z-index: -1;
	}

	.xieyi {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.xieyi-zi {
		margin-left: 20px;
		width: 250px;

	}

	.van-checkbox {
		align-items: flex-start;
		margin-top: 5px;
	}

	.dlZhuanghang {
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		margin-top: 30px;
	}

	.animated {
		animation-duration: 1s;
		/*动画时间*/
		animation-fill-mode: both;
		/*播放后的状态*/
	}

	.animated {
		animation-iteration-count: 1;
		/*动作循环的次数：infinite 无限循环*/
	}

	.animated {
		animation-duration: 1s;
		/*动画时间*/
	}

	.dou {
		animation-name: container;
		/*动画的名称*/
		transform-origin: center bottom;
		/*设置动画旋转元素的基点为：居中靠下*/
		cursor: pointer;
	}

	@keyframes container {

		0%,
		100%,
		20%,
		50%,
		80% {
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
			/*贝塞尔曲线 ： X1 Y1 X2 Y2*/
			transform: translate3d(0, 0, 0);
			/*设置只在Z轴上移动*/
		}

		40%,
		43% {
			transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);
			transform: translate3d(0, -30px, 0);
		}

		70% {
			transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			transform: translate3d(0, -15px, 0);
		}

		90% {
			transform: translate3d(0, -4px, 0);
		}
	}
</style>
